<template>
    <div class="alert_count_bar">
        <div class="text_area">{{ _areaName }}</div>
        <div class="bar_container">
            <img src="../assets/img/module5/alert/count_bar_icon.png" alt="logo" class="alert_bar_icon" :style="{ width: _percentage*100+'%' }"/>
            <span class="bar_label" :style="{ width: _percentage*100+'%' }">{{ _alertNumber }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name:"alert_count_area",
    props: {
    _areaName: String,
    _alertNumber: Number,
    _percentage:Number,
    }, //外部可以使用的属性 
    data(){
        return{
            //title:"电影"     
        }
    },
    methods:{

    }
}
</script>

<style>

.alert_count_bar {
  display: flex; /* 使用flex布局 */
  margin-bottom: 0px; /* 每个条目之间的间距 */
}

.text_area {  /*空域区域字的显示：空域5-6*/
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  align-items: flex-start; /* 垂直方向上将内容对齐到顶部 */
  align-self: flex-start;
  width: 20%; /* 调整宽度以留出空间给进度条 */
  text-align: left; /* 文字左对齐 */
}

.bar_container {
  /* position: relative;  相对定位用于定位文字 */
  display: flex;
  flex-direction: column;
  width: 70%; /* 进度条占据剩余空间 */
  padding: 0; /* 移除额外的内边距 */
}

.alert_bar_icon {
  /*width:100% ;  使用父容器的宽度 */
  height: 10px; /* 固定高度 */
  display: block; /* 将img显示为块级元素 */
  border-radius: 0px; /* 圆角 */
  margin-top: 2px;
  margin-bottom: 3%;
  background: linear-gradient(to right, #00d1d1, #529fcf); /* 使用渐变背景来模拟进度条效果 */
}

.bar_label {
   /*position: absolute; 绝对定位 */
  /*right: 5px;  距离右侧5px */
  /*top: 50%;  垂直居中 */
  transform: translateY(-50%); /* 垂直居中对齐 */
  color: white; /* 文字颜色 */
  font-size: 14px; /* 文字大小 */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  align-self: flex-start;
  text-align: right; /* 文字左对齐 */
}


</style>